import { BoxesIcon, ChartLineIcon, HouseIcon } from "lucide-react";
import type * as React from "react";
import { NavUser } from "@/components/nav-user";
import { OrgSwitcher } from "@/components/org-switcher";
import { SidebarNav } from "@/components/sidebar-nav";
import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader } from "@/components/ui/sidebar";
import type { Session } from "@/lib/auth-client";
import type { OrgWithMembers } from "@/queries/auth";

const data = {
  reports: [
    {
      title: "Dashboard",
      url: "/",
      icon: HouseIcon,
    },
    {
      title: "Reports",
      url: "/reports",
      icon: ChartLineIcon,
    },
  ],
  settings: [
    {
      title: "Organizations",
      url: "/organizations",
      icon: BoxesIcon,
    },
  ],
};

export function AppSidebar({
  ...props
}: React.ComponentProps<typeof Sidebar> & {
  session: Session;
  orgs: OrgWithMembers[];
}) {
  return (
    <Sidebar collapsible="icon" variant="floating" {...props}>
      <SidebarHeader>
        <OrgSwitcher session={props.session} orgs={props.orgs} />
      </SidebarHeader>
      <SidebarContent>
        <SidebarNav groupName="reports" items={data.reports} />
        <SidebarNav groupName="settings" items={data.settings} />
      </SidebarContent>
      <SidebarFooter>
        <NavUser user={props.session.user} />
      </SidebarFooter>
    </Sidebar>
  );
}
